<template>
  <!-- 主体部分 -->
  <div class="mt-10 ml-10 mr-10">
    <!-- 主体头部 -->
    <div class="mb-10">
      <ContentTitle :info="info" />
      <div class="bg-fff pt-20 pl-30 pb-15">
        <p>
          <i class="iconfont icon-info"></i
          ><span>目前计费功能暂不完善，所以计费功能暂未正式启用。</span>
        </p>
        <p>
          <i class="iconfont icon-info"></i
          ><span
            >正式收费后，我们将发送通知至首页公告；在此期间，若有欠费情况可联系我们：发送邮件至</span
          ><span><a class="bluea" href="#">1231314141@qq.com</a></span>
        </p>
        <p><a class="bluea" href="#">点击查看具体收费标准</a></p>
      </div>
      <!-- 主体头部结束 -->
    </div>
    <!-- 主体中间 -->
    <div class="mb-10">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span><i class="iconfont icon-info"></i>设备概览</span>
          </div>
        </template>
        <div>
          <p class="f14 mb-10"><span>计划:&nbsp;</span><span>按量计费</span></p>
          <p class="f14 mb-10"><span>状态:&nbsp;</span><span>正常</span></p>
        </div>
      </el-card>
    </div>
    <!-- 主体下部 -->
    <div>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span><i class="iconfont icon-info"></i>设备概览</span>
          </div>
        </template>
        <div class="input-box">
          <p class="f14 mb-10">
            <span>账户余额:&nbsp;</span><span>￥{{balance}}</span>
          </p>
          <p class="f14 mb-10">
            <span>充值金额:&nbsp;</span>
            <el-input v-model="inputObj.inputMoney" placeholder="充值金额"  style="width:150px;" />
          </p>
          <p class="f14 mb-10">
            <span>备注:&nbsp;</span>
            <el-input v-model="inputObj.inputMsg" placeholder="备注信息"  style="width:150px;"/>
          </p>
          <el-button type="primary" @click="addMoney">充值</el-button>
        </div>
      </el-card>
    </div>
    <!-- 主体部分结束 -->
  </div>
</template>

<script setup>
import ContentTitle from "@/components/ContentTitle.vue";
import {onMounted, reactive, ref} from 'vue';
import * as api from "@/api/index.js"
import { on } from "events";

let info = {
  type: "计费",
  text: "账户信息",
  msg: "展示当前账户的剩余消息额度，可根据兑换码兑换消息额度。",
};

//定义输入框内容，充值金额和备注
const inputObj = reactive({
  inputMsg:'',
  inputMoney:0
})


//获取账户余额
let balance = ref(0);
const getBalance = ()=>{
  api.$feeBalance().then(res=>{
    balance.value = res.data.balance;
  })
}


const addMoney = ()=>{
  let params = {
    amount:inputObj.inputMoney*1,
    desc: inputObj.inputMsg,
  };
  // console.log(params);
  // /fee/recharge
  //判断输入的钱是不是数字类型,如果不是提示用户请输入数字失败
  if(params.amount){
    api.$feeAdd(params).then(res=>{
      balance.value += params.amount;
    inputObj.inputMoney = 0;
    inputObj.inputMsg = '';
  })
}else{
  alert("请输入正确的金额数")
    return false;
  }

}

onMounted(()=>{
  getBalance();
})


</script>

<style lang="less" scoped>
.icon-info {
  color: orange;
  font-weight: 600;
  font-size: 20px;
  margin-right: 3px;
}
.bluea {
  color: #409eff;
}
</style>